<template>
  <table>
      <tr v-for="(item, index) in balls" :key="index" align="center">
          <td>
              <input type="checkbox" :id="item.name" :value="item.name" v-model="item.checked" />
          </td>
          <td>{{ item.name }}</td>
      </tr>
  </table>
  数组定义格式:{{ balls }} <br>
  <button @click="checkAll">全选</button>
  <button @click="uncheckAll">取消全选</button>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
    setup () {
        const state = reactive({
            balls: [
                {
                    name: '足球',
                    checked: false
                },
                {
                    name: '篮球',
                    checked: false
                },
                {
                    name: '羽毛球',
                    checked: false
                }
            ],
        })
        const checkAll = () => {
            state.balls.forEach((item) => {
                if(item.checked == false) {
                    item.checked = true
                }
            })
        }
        const uncheckAll = () => {
            state.balls.forEach((item) => {
                if(item.checked == true) {
                    item.checked = false
                }
            })
        }
        return {
            ...toRefs(state),
            checkAll,
            uncheckAll
        }
    }
}
</script>

<style>

</style>